<template>
  <section class="xmv-message-box xmv-wrap">
    <h4>message-box</h4>
    <div class="demo-markup-source u-letter-box--small c-text">
      <button type="button" class="c-button" @click="openAlert">Alert</button>
      <button type="button" class="c-button" @click="openConfirm">Confirm</button>
      <button type="button" class="c-button" @click="openPrompt">Prompt</button>
    </div>
    <div class="demo-markup-source u-letter-box--small">
      <pre class="c-pre">
        <code class="c-code c-code--multiline html hljs xml">
  export default {
    methods: {
      openAlert() {
        this.$messagebox.alert('请填写证件号码', '温馨提示');
      },

      openConfirm() {
        this.$messagebox.confirm('确定执行此操作?', '温馨提示');
      },

      openPrompt() {
        this.$messagebox.prompt(' ', '请输入姓名').then(({ value }) => {
          if (value) {
            this.$messagebox.alert(`你的名字是 ${ value }`, '输入成功');
          }
        });
      }
    }
  };
        </code>
      </pre>
    </div>
  </section>
</template>
<script>
  export default {
    methods: {
      openAlert() {
        this.$messagebox.alert('请填写证件号码', '温馨提示');
      },

      openConfirm() {
        this.$messagebox.confirm('确定执行此操作?', '温馨提示');
      },

      openPrompt() {
        this.$messagebox.prompt(' ', '请输入姓名').then(({ value }) => {
          if (value) {
            this.$messagebox.alert(`你的名字是 ${ value }`, '输入成功');
          }
        });
      }
    }
  };
</script>

<style lang="less" scoped>
h4 {
  font-weight: normal;
  font-size: 14px;
  text-align: left;
  background-color: #e9e9e9;
  padding: 10px;
  margin: 20px 0;
}
p {
  text-align: left;
  padding: 0.5em 0;
}
.c-code--multiline {
  display: block;
  padding: 0.5em 1em;
  border-radius: 4px;
  white-space: pre;
  word-wrap: normal;
  overflow-x: auto;
}
.demo-markup-source {
  text-align: left;
}
.c-code {
  font-size: 0.8em;
}
</style>